<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- 这是个iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；-->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 全屏显示-->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- 不要让设备识别电话号码和邮箱地址-->
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- DNS预解析-->
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link href="../css/common/reset.css" rel="stylesheet">
    <link href="../css/common/common.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/test-paper2.css" rel="stylesheet">

    <script src="../js/zepto-1.1.4.min.js"></script>
    
    <title>转训考试</title>
    
  </head>
  <body>
    <div class="test-paper">
        <div class="header">
            <span>多选题</span>
            <span class="time">30:00</span>
            <span>20/20</span>
        </div>
        <div class="container">
            <div class="answer-question-item">
                <p class="question">20、对于B+用户，以下哪些岗位适用于使用</p>
                <div class="answer-box">
                    <div class="answer-item active">
                        <div class="check-box"></div>
                        <span class="answer-text">A、制式报表</span>
                    </div>
                    <div class="answer-item">
                        <div class="check-box"></div>
                        <span class="answer-text">B、自定义报表</span>
                    </div>
                    <div class="answer-item">
                        <div class="check-box"></div>
                        <span class="answer-text">C、明细查询</span>
                    </div>
                    <div class="answer-item">
                        <div class="check-box"></div>
                        <span class="answer-text">D、标单历史</span>
                    </div>
                </div>
            </div>

            <div class="btn-box">
                <button class="handler-btn">交卷</button>
            </div>
        </div>
    </div>

    <script src="../js/remset.js"></script>
    <script>
        // 复选点击
        $('.answer-item').click(function() {
            $(this).hasClass('active') ? $(this).removeClass('active') : $(this).addClass('active')
        })

        // 考试时间设定
        var timeDom = $('.time')
        var defaultMinute = 30    // 默认考试时间 (分钟)

        var totalSecond = defaultMinute * 60
        var m = 0
        var s = 0
        var text = ''

        var timer = setInterval(() => {
            if(totalSecond == 0) {
                // 时间到, 交卷并清除定时器

                // 后端在这里 处理交卷逻辑
                clearInterval(timer)
            }

            m = parseInt(totalSecond / 60)
            s = totalSecond % 60

            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            text = m + ":" + s
            timeDom.text(text)

            totalSecond --
        }, 1000)
    </script>
  </body>
</html>